<%@page language="java" contentType="text/html;charset=UTF-8" import="java.sql.*" import="java.lang.Object" import="java.util.Date" import="java.security.MessageDigest"%>
<%@ page import="java.util.ArrayList"%>
<%@ page import="Annotation.Cluster.Methods.*"%>
<%@ page import="java.io.*"%>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Update the quest result</title>
		<style type="text/css">
			th {text-align:center; vertical-align:top;}
			.source{width:250px; height:400px; padding:10px; border:1px solid #aaaaaa; background:cyan; box-shadow: 10px 10px 5px #dddddd;}
			.divbox{width:250px; height:70px; padding:10px; border:1px solid #aaaaaa; box-shadow: 10px 10px 5px #888888;}
			.items{width:200px; border:2px solid #a1a1a1; padding:5px 5px; background:#dddddd;}
		</style>

		<script>
			function allowDrop(ev)
			{
				ev.preventDefault();

			}
			
			function drag(ev)
			{
				ev.dataTransfer.setData("Text",ev.target.id);
				
			}

			function drop(ev)
			{
				ev.preventDefault();
				var items=ev.dataTransfer.getData("Text");
				ev.target.appendChild(document.getElementById(items));
				
				var clusters=ev.target.id;

				document.getElementById('info').value = document.getElementById('info').value + clusters+"-"+items+"###"; 
			}
			function numberAdding(ev)
			{
				
				var num=document.getElementById('clusterAdd').value
				if(num==0){
					//document.getElementById("createCluster").valueOf("iii");
				}else{
					for(var k =0;k<num;k++){
						document.getElementById("newClusterPool").innerHTML+="<div id='newdiv" + k + "' class='divbox' ondrop='drop(event)' ondragover='allowDrop(event)'></div><p>";			
					}
					document.getElementById("clusterAdd").style.visibility= "hidden";
					document.getElementById("createCluster").style.visibility= "hidden";
				}	
			}
			
		</script>
	</head>
	<body>
		<hr>
		
		<%
		
		int totalClusterNumber=3;
		
		ArrayList<ArrayList> treeInfo = new ArrayList<ArrayList>();
		//treeInfo.add(firstLeafID); //int for first level leaf - all users
		//treeInfo.add(treelist); //double[4] tree and its leaf  -- SysID, DB_PK, X, Y
		//treeInfo.add(leaflist); //int[3] ever leaf is emery which two leaf -- SysID, merge1, merge2
		ArrayList<Integer> firstLeafID = new ArrayList<Integer>();
		ArrayList<double[]> treelist = new ArrayList<double[]>();
		ArrayList<int[]> leaflist = new ArrayList<int[]>();
		ArrayList<double[]> al = new ArrayList<double[]>();
		
		StartMethodForGroupNum methods=new StartMethodForGroupNum(totalClusterNumber);
		
		treeInfo=methods.getDiffusionTree();
		//firstLeafID=treeInfo.get(0);
		leaflist=treeInfo.get(2);
		al=treeInfo.get(3);
		
		%>
		
		
		<table width="600" border="1">			
			<tr>
				<th width="50%" style="padding:5px;">
					<%	
					for(int i=0;i<al.size();i++){  //產生div的地方
						String notStore="";
						out.print("<div id='div" + i + "' class='divbox' ondrop='drop(event)' ondragover='allowDrop(event)'>");
						
						double nodeValue = al.get(i)[0];
						
						if(nodeValue>0){ //表示是葉節點
							String nv = nodeValue+"";
							nv=nv.substring(0, nv.indexOf("."));
							out.print("<div id='item" + nv + "' class='items' ondragstart='drag(event)' draggable='true'>");
							out.print("第"+nv+"個項目");
							out.print("</div>");
						}else if(nodeValue<0){ //表示是合併節點
							//checkNumber(leaflist, nodeValue);
							String node=checkTreeLeaf(leaflist,nodeValue);
							//System.out.println("node====="+node);
							String mm[]=node.split("@@&&");
							for(int k =0;k<mm.length;k++){
								//System.out.println("K=="+mm[k]);
								out.print("<div id='item" + mm[k] + "' class='items' ondragstart='drag(event)' draggable='true'>");
								out.print("第"+mm[k]+"個項目");
								out.print("</div>");
							}
						}
						out.print("</div><p>");
					}
					%>
					<input type="text" id=info >
				</th>
				
				<th width="50%" style="padding:5px;">
					<div id="pool" class="source" ondrop="drop(event)" ondragover="allowDrop(event)">
					</div>
				</th>
				
				<th width="50%" style="padding:5px;">
					<input type="number" id=clusterAdd onkeydown="if (event.keyCode == 13) numberAdding(event)"/>
	    			<input type="button" id="createCluster" name="create" onClick="numberAdding(event)" value="extra cluster"/>
	    			<div id="newClusterPool"></div>
				</th>
				
				
			</tr>					
		</table>		
				<%!
				private String checkTreeLeaf(ArrayList<int[]> leaflist, double nodValue){
					String s="";
					for(int i=0;i<leaflist.size();i++){ //array 裡全部巡一回找出nodeValue的資料
						if(nodValue==leaflist.get(i)[0]){ //找到node的資料後要幹麻?
							
							int ch=leaflist.get(i)[1];
							if(ch>0){
								s=s+ch+"@@&&";
							}else{
								s=s+checkTreeLeaf(leaflist,ch);
							}	
							
							int ch2=leaflist.get(i)[2];
							if(ch2>0){
								s=s+ch2+"@@&&";	
							}else{
								s=s+checkTreeLeaf(leaflist,ch2);
							}
						}
					}
					return s;
				}
				%>
	</body>
</html>